<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{width:100px; background-color: #45dfff; }
	</style>
	<script src="jquery-1.10.1.min.js"></script>
	<script>
/*	$()下的常用方法
		on() : 优点
				1. 可以添加自定义方法，如show方法 -> on('show',执行函数)
				2. 可以添加多个方法绑定同一个事件，如点击事件+鼠标移入事件 -> on('click mouseover',执行函数)
				3. 可以添加多个方法绑定多个事件 -> 如 on( {方法1 : 执行函数 , 方法2 : 执行函数} ),如下面例子
				4. 还可以on('click', {属性:属性值}, 执行函数)
*/
	$(function () {

		//常规
	/*	$('div').click(function (){
			alert(1);
		})
	*/
		//改写成on
	/*	$('div').on('click', function (){
			alert(1)
		})
	*/

		//优点1
/*		$('div').on('haha', function() {
			alert(123);
		})
		$('div').trigger('haha');		//主动触发triggle，及立即执行自定义方法haha对应的事件函数
	*/
	
	/*	//优点2
		$('div').on('click mouseover', function () {
			alert(123);
		});
	*/
		//优点3
		/*$('div').on({
			'click': function () {
				alert(123);
			},
			'mouseover': function () {
				alert(456);
			}
		});*/

		// 优点4  用于事件
		/*$('div').on('click', {"name": "momo"}, function (ev) {
			console.log(ev.data)
		})*/

	})
	</script>
</head>
<body>
	<div>div</div>
</body>
</html>